let userArr = [];
// 发送请求
$.ajax({
    type: "get",
    url: '/users',
    success: function (res) {
        userArr = res
        render()

    }
})

// 封装一个render函数 用于渲染页面的
function render() {
    let html = template("userTpl", { data: userArr })
    // console.log(html);
    $("tbody").html(html);
}

// 完成头像上传功能 这个代码只是将图片上传到服务器上
// 我们还要将图片上传到数据库中是当完成用户添加的时候才写入
$("#avatar").on("change", function () {
    let formData = new FormData()
    // console.log(this.files[0])
    formData.append("avatar", this.files[0])
    $.ajax({
        type: "post",
        url: "/upload",
        data: formData,
        // 只要通过jquery中的ajax来实现文件上传功能 就必须有下面两个属性
        processData: false,
        contentType: false,
        success: function (res) {
            // console.log(res);
            $("#previewImg").attr("src", res[0].avatar)
            // 还需要将图片的地址保存到这个表单中的某一个表单控件属性中
            $("#hidden").val(res[0].avatar)
        }
    })
})

// 完成用户添加功能
$("#btnAdd").on("click", function () {
    // 将表单里面的数据进行一次性获取到
    let data = $("form").serialize()
    $.ajax({
        type: "post",
        url: "/users",
        data: data,
        success: function (res) {
            // console.log(res);
            // 构建无刷新技术
            // 把添加后的用户放到最上面
            userArr.unshift(res);
            // userArr.push(res);
            render();
            // 将表单清空
            $('input[type="email"]').val("");
            $('input[name="nickName"]').val("");
            $('input[name="password"]').val("");
            $("#status0").prop("checked", false);
            $("#status1").prop("checked", false);
            $("#admin").prop("checked", false);
            $("#normal").prop("checked", false);
            $("#hidden").val("");
            $("#previewImg").attr("src", "../assets/img/default.png")
        },
        error: function (err) {
            console.log(err);
        }
    })
})

// 完成用户编辑功能
// 给编辑按钮注册点击事件 事件委托
// editt表示给谁添加事件委托 编辑按钮的class
var userId;
$("tbody").on("click", ".editt", function () {
    // 当点击右侧编辑按钮的时候要拿到该用户id
    userId = $(this).attr("data-id")
    $("h2").html("编辑用户")
    let tr = $(this).parents("tr");
    // 找到添加后头像下面的图片地址
    // console.log(tr.find("img").attr("src"));
    if (tr.find('img').attr('src')) {
        $("#previewImg").attr("src", tr.find("img").attr("src"))
    } else {
        $('#previewImg').attr('src', '../assets/img/default.png')
    }
    // 把图片地址放到隐藏域中
    $("#hidden").val(tr.find("img").attr("src"))
    // 把数据显示在编辑用户栏中
    $('input[name="email"]').prop("disabled", true).val(tr.children().eq(2).text());
    $('input[name="nickName"]').val(tr.children().eq(3).text());
    $('input[name="password"]').prop("disabled", true);
    if (tr.children().eq(4).text() == "激活") {
        $("#status1").prop("checked", true)
    } else {
        $("#status0").prop("checked", true)
    }
    if (tr.children().eq(5).text() == "超级用户") {
        $("#admin").prop("checked", true)
    } else {
        $("#normal").prop("checked", true)
    }

    // 当点击右侧编辑按钮时 将左侧添加功能隐藏 编辑按钮显示
    $("#btnAdd1").show()
    $("#btnAdd").hide()
})

// 完成编辑功能
$("#btnAdd1").on("click", function () {
    // 点击左侧编辑按钮可以拿到id
    // console.log(userId);
    // 表示将表单数据一次性获取到
    let data = $("form").serialize();
    $.ajax({
        type: "PUT",
        url: "/users/" + userId,
        data: data,
        success: function (res) {
            // console.log(res);
            // 实现无刷新 只要我们编辑完成了 服务器就响应给我们一个对象 这个对象里面就是这个用户的相关信息
            // 我们显示在页面上的所有数据 都是保存在userArr这个数组中 然后遍历数组
            let index = userArr.findIndex(item => item._id == res._id)
            // 拿到数组下标索引值
            // console.log(index);
            userArr[index] = res;
            // 重新渲染页面
            render()
            // 只要我们编辑完成了 之前的那个表单要变成添加用户功能
            $("h2").html("添加用户")
            $('input[type="email"]').val("");
            $('input[name="nickName"]').val("");
            $('input[name="password"]').val("");
            $("#status0").prop("checked", false);
            $("#status1").prop("checked", false);
            $("#admin").prop("checked", false);
            $("#normal").prop("checked", false);
            $("#hidden").val("");
            $("#previewImg").attr("src", "../assets/img/default.png")
            $("#btnAdd").show()
            $("#btnAdd1").hide()

        },
        error: function (err) {
            console.log(err);
        }

    })


})

// 完成单个删除功能 使用时间委托
$("tbody").on("click", ".del", function () {
    // 获取该用户id
    let id = $(this).attr("data-id")
    if (confirm("您真的确定要删除吗？")) {
        $.ajax({
            type: "delete",
            url: "/users/" + id,
            success: function (res) {
                // 遍历数组userArr
                let index = userArr.findIndex(item => item._id == res._id)
                // 调用数组的splice()方法将这个数组元素删除
                userArr.splice(index, 1)
                // 渲染页面
                render()

            }
        })
    }
})

// 完成多个删除功能
// 全选功能
$("thead input").on("click", function () {
    // if ($(this).prop('checked')) {
    //     $("tbody input").prop("checked", $(this).prop('checked'))
    // } else {
    //     $("tbody input").prop("checked", false)
    // }
    $("tbody input").prop("checked", $(this).prop('checked'))
})
// 如果下面的复选框都打上勾 则上面的复选框也打上勾  用事件委托
$("tbody").on("click", ".check", function () {
    // 判断下面复选框长度是否等于被选中的个数
    let length = $(".check").length
    let lengthChecked = $(".check:checked").length
    // console.log(length,lengthChecked);
    $("thead input").prop("checked", length === lengthChecked)
    if (lengthChecked > 1) {
        $("#delAll").show()
    } else {
        $("#delAll").hide()
    }
})

// 给批量删除注册点击事件
$("#delAll").on("click", function () {
    var arr = [];
    // $(".check:checked")表示被选中的复选框 遍历他
    $(".check:checked").each(function (index, item) {
        // console.log(item);
        // 要拿到被点击的id
        //    console.log(checkedId);
        arr.push($(item).parents("tr").attr("data-id"))
        // console.log(arr)

    })

    // 发送ajax
    $.ajax({
        type: "delete",
        url: "/users/" + arr.join("-"),
        success: function (res) {
            // console.log(res);
            // 遍历res
            res.forEach(item => {
                let indexx = userArr.findIndex(ele => item._id === ele._id)
                // 调用数组的splice()方法将这个数组元素删除
                userArr.splice(indexx, 1)
                // 渲染页面
                render()
            });
        }
    })
})